<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet" />
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v1.0.0/mapbox-gl-language.js'></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>

<body>
    <div id="map" style="width: 800px; height: 600px"></div>
    <script>
        /** 缩放层级小的时候关闭建筑物显示，否则太卡 */
        mapboxgl.accessToken =
            "pk.eyJ1IjoiaG91eGlleXUiLCJhIjoiY2pldjE5amU3NndzeDM5bzd5bm9ncDgycyJ9.j1F-Lgid3L5k2Abm8_xTeQ";
        const map = new mapboxgl.Map({
            container: "map", // container ID
            style: "mapbox://styles/mapbox/streets-v11", // style URL
            center: [117.125829, 36.656704], // starting position [lng, lat]
            zoom: 12, // starting zoom
        });

        map.addControl(
            new MapboxLanguage({
                defaultLanguage: "zh-Hans",
            })
        );
        let layer = 'g_buildings'
        map.on("load", function () {
            // let tileurl = "http://60.211.159.133:8095/geoserver/gwc/service/tms/1.0.0/cite%3Ag_buildings@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf";
            let tileurl = `http://192.168.0.53:8080/geoserver/gwc/service/tms/1.0.0/rp7%3A${layer}@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf`;
            map.addSource("buildings", {
                type: "vector",
                scheme: "tms",
                tiles: [
                    tileurl
                ],
                // generateId:true
                //   promoteId: "buildingcode",
            });
            let legends = ["match",
                ["get", "buildtype"],
                "普通住宅", "#fc97af",
                "商住两用", "#87f7cf",
                "办公楼", "#f7f494",
                "教学楼", "#72ccff",
                "集体宿舍", "#f7c5a0",
                "商场", "#d4a4eb",
                "酒店", "#d2f5a6",
                "医 院", "#76f2f2",
                "其他建筑", "#00ffff",
                "#00ffff"
            ];

            map.addLayer({
                id: "buildings",
                minzoom: 10,
                source: "buildings",
                // filter: ["==", ["slice", ["get", "code"], 0, 9], "3701"],
                "source-layer": `${layer}`,
                type: "fill",
                paint: {
                    "fill-color": legends,
                    //  "fill-opacity": 1,
                    "fill-outline-color": "#000000",
                },
            });
            map.addLayer({
                id: "label_buildings",
                type: "symbol",
                source: "buildings",
                "source-layer": `${layer}`,
                layout: {
                    "text-field": "{buildname}",
                    // "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
                    "text-size": 10,
                    "text-offset": [0, -1.5],
                    // "text-allow-overlap": true
                },
                minzoom: 14,
                paint: {
                    "text-halo-width": 1,
                    "text-halo-color": "white",
                },
            });
            map.addLayer({
                id: "buildings_highlight",
                minzoom: 10,
                source: "buildings",
                filter: ["==", ["id"], ""],
                "source-layer": "g_buildings",
                type: "fill",
                paint: {
                    "fill-outline-color": "#484896",
                    "fill-color": "#6e599f",
                    "fill-opacity": 0.75,
                },
            });

            map.on("click", "buildings", (e) => {
                const features = map.queryRenderedFeatures(e.point, {
                    layers: ["buildings"],
                });
                console.log(features);
                if (features && features.length > 0) {
                    map.setFilter("buildings_highlight", [
                        "==",
                        ["id"],
                        features[0].id,
                    ]);
                }
            });

        });
    </script>
</body>

</html>